<template>
  <div>
    <!-- 头部导航栏 -->
    <head-component noBack="true" title="资讯"/>

    <div class="con">
      <div class="list" v-for="(item,i) in newsList" :key="i"  @click="toZx(item.id,2, item.news_title)">
        <!-- <div class="left"> -->
        <p class="f30 col_33 twoLine">{{item.news_title}}</p>
          <!-- <div  class="f24 col_99">{{item.news_addtime}}</div> -->
        <!-- </div> -->
        <img :src="item.news_img" alt="">
      </div>
      <!-- 如果内容列表为空 -->
      <div class="null_list" v-if="newsList == ''">
        <img class="null_img" src="@/common/icon/nothing.png" alt="">
        <div class="null_title">暂无数据</div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <foot-component :select = '2'/>
  </div>
</template>
<script>
export default {
  name: '',
  components: {
    'headComponent':()=>import('@/components/layout/head'),
    'footComponent':()=>import('@/components/layout/foot')
  },
  data() {
    return {
      newsList:[],
      userStatus:0
    }
  },
  created() {
    var $this = this;
    var t = this.$toast.loading({message: '正在加载数据', mask: true, duration: 9999})
    var data = {u_id: localStorage.getItem('uid'), token: localStorage.getItem('token')};
    $this.$axios.post('index.php?m=index&c=consult', data)
      .then((res) => {
        t.clear();
        if (res.data.code == 1) {
          res.data.news.map((item, index) => {
            if(item.c_id == 14){
              $this.newsList.push(item)
            }
          })
        } else {
          $this.$router.push('/login');
        }
      });

    //  个人信息
    $this.userStatus = localStorage.getItem('isVip');
  },
  methods:{
    toZx(id,type,text){
      var $this = this;
      if($this.userStatus != 0){
        $this.$router.push({path:'/ganhuoD', query:{id: id,type:type,title:text}})
      }else{
        $this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            $this.$router.push('/vip');
          }
        })
      }
    },
  }
}
</script>
<style scoped lang="less">
  .twoLine{overflow:hidden;display:-webkit-box;text-overflow: ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;white-space: normal;}
  .main{width: 100%;height: 100%;background: #fff;}
  .con{width: 92%; margin: 1.2rem auto 1.4rem;
    .list{
      display: flex;
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      align-items: center;
      padding: 0.23rem 0;
      border-top: 0.02rem solid #f5f5f5;
      overflow: hidden;
      .left{
        float: left;
        width: 58%;
        p{
          line-height: 0.7rem;
          height: 1.26rem;
          margin-bottom: 0.36rem;
        }
      }
      img{
        height: 1.2rem;
        border-radius: 0.12rem;
        float: right;
      }
    }
  }
</style>
